<template>
	<div class="list4">
		<!--引用layer组件-->
		<layer ref="layer"></layer>
		<ul class="navD">
			<li v-for="(item,index) in List" @click="showBg(index,$event)">{{item.itemName}}</li>
		</ul>
		dghdfgdszgds
	</div>
</template>
<script>
	import Layer from './layer'
	export default {
		name: 'List4',
		data() {
			return {
				x: '',
				y: '',
				span: document.createElement('span'),
				List: [{
						itemName: "what1"
					},
					{
						itemName: "what2"
					},
					{
						itemName: "what3"
					},
					{
						itemName: "what4"
					},
				]
			}
		},
		methods: {
			showBg(index, e) {
				this.x = e.pageX;
				this.y = e.pageY;
				this.x = this.x - e.target.offsetLeft;
				this.y = this.y - e.target.offsetTop;
				this.span.setAttribute("id", "sp");			
				this.span.style.cssText = 'top: ' + this.y + 'px !important;left: ' + this.x + 'px !important';
				e.target.append(this.span);
			}
		},
		mounted() {

		},
		components: {
			Layer: Layer,
		},
	}
</script>

<style>
	.el-row{
	    padding: 10px 0 10px;
	}
	.list4 {
		margin-top: 10px;
	}
	
	.navD {
	    width: 15%;
	    border-radius: 5px;
		background: #2C3E50;
	}
	
	.navD li {
	    color: #fff;
	    line-height: 50px;
	    border-bottom: 1px solid #000000;
	    position: relative;
	    overflow: hidden;
	    text-indent: 20px;
	}
	
	#sp {
		position: absolute;
		top: 0px;
		left: 0px;
		background: #5BAFFF;
		width: 1px;
		height: 1px;
		transform: scale(.5,.5);
		border-radius: 0.5px;
		animation: anima 1s;
	}
	
	@keyframes anima {
		from {
			transform: scale(.5);
			opacity: 1;
		}
		to {
			transform: scale(400);
			opacity: 0;
		}
	}
</style>